<template lang="">
  <div class="scatter_container">
    <div
      class="scatter_echart"
      :id="id"
      :style="{
        width,
        height
      }"
    ></div>

    <div class="active_bg">
      <div class="teacher_podium">讲台</div>
      <div class="stu_area">学生区域</div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    color: {
      type: String,
      default: "#CCD2FF"
    },
    id: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "400px"
    },
    height: {
      type: String,
      default: "400px"
    },
    scatterData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    init() {
      const option = {
        xAxis: {
          max: 1920,
          splitLine: {
            // 隐藏图表内刻度线
            show: false
          },
          axisLine: {
            // 坐标轴线
            show: true,
            lineStyle: {
              color: "transparent"
            }
          }
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "5%",
          top: "5%"
        },

        yAxis: {
          inverse: true,
          splitLine: {
            // 隐藏图表内刻度线
            show: false
          },
          max: 1080,

          axisLine: {
            // 坐标轴线
            show: true,
            lineStyle: {
              color: "transparent"
            }
          }
        },
        series: [
          {
            itemStyle: {
              color: this.$props.color
            },
            symbolSize: 10,
            data: this.$props.scatterData,
            type: "scatter"
          }
        ]
      };
      const dom = document.getElementById(this.$props.id);
      const scatterChart = echarts.init(dom);
      scatterChart.setOption(option);

      window.addEventListener("resize", function () {
        scatterChart.resize();
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  }
};
</script>
<style lang="scss">
.scatter_container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  width: 240px;
  height: 135px;
  .scatter_echart {
    position: relative;
  }
  .active_bg {
    position: absolute;
    width: 82%;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #98add1;
    font-size: 14px;

    .teacher_podium {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 144px;
      height: 20px;
      background-color: #234a8f;
      opacity: 0.4;

      margin-bottom: 4px;
      border-bottom-left-radius: 30px;
      border-top-left-radius: 5px;

      border-bottom-right-radius: 30px;
      border-top-right-radius: 5px;
    }

    .stu_area {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 208px;
      height: 106px;
      border-radius: 25px;
      opacity: 0.4;
      background-color: #234a8f;
    }
  }
}
</style>
